<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <link href="https://at.alicdn.com/t/c/font_4624650_rh7k1lbs07e.css" rel="stylesheet">
    <link href="./CSS/demo1.css" rel="stylesheet">

</head>
<body>
<div id="root">
    <div id="header">
        <div class="headerLeft">
            <img alt="" src="./images/logo/logo.png">
        </div>
        <div class="headerRight">
            <ul class="headerR_ul">
                <li class="headerRL headerR_li">
                    <ul>
                        <li class="headerRL_li"><a href=""><i class="iconfont icon-bijiben"></i>OA办公系统</a></li>
                        <li class="headerRL_li"><a href=""><i class="iconfont icon-ziliaoku"></i>教学系统</a></li>
                        <li class="headerRL_li"><a href=""><i class="iconfont icon-icon-test"></i>工单系统</a></li>
                    </ul>
                </li>
                <li class="headerRR headerR_li">
                    <ul>
                        <li><a href="">前端讲师 <i class="iconfont icon-sanjiao"></i></a></li>
                        <li><a href="">M <i class="iconfont icon-sanjiao"></i></a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <div id="content">
        <!--侧边栏-->
        <div class="contentL">
            <ul class="contentL_ul">
                <li :key="itemA.id" @click="Dis(itemA.id)" class="navs_li" v-for="itemA in navs">
                    <p>
                        <i :class="itemA.iconClass" class="iconfont"></i>
                        <span>{{itemA.title}}</span>
                        <i class="iconfont icon-xiajiantou"></i>
                    </p>
                    <ul id="navInternal_ul" v-model:class="itemA.disNav">
                        <li class="navInternal" v-for="itemB in itemA.nav">
                            <span>{{itemB.name}}</span>
                        </li>
                    </ul>
                </li>
            </ul>
            <div>
                <img alt="" src="./images/demo1.png">
            </div>
        </div>
        <div class="contentR">
            <div class="contentTop">
                <ul>
                    <li><a href="">系统管理</a></li>
                    <li>&nbsp;>&nbsp;<a href="">后台首页</a></li>
                </ul>
                <label>
                    <span>搜索：</span>
                    <input placeholder="请输入学生姓名...." type="text">
                    <a href=""><i class="iconfont icon-Magnifier"></i></a>
                </label>
            </div>
            <div class="contentMain">
                <div class="contentMain_a">
                    <table class="content_table">
                        <tr>
                            <th>登录账户</th>
                            <th>IP</th>
                            <th>登录所在地</th>
                            <th>上次登陆时间</th>
                        </tr>
                        <tr :key="item.id" v-for="item in users">
                            <td>{{item.user}}</td>
                            <td>{{item.ip}}</td>
                            <td>{{item.address}}</td>
                            <td>{{item.oldDate}}</td>
                        </tr>
                    </table>
                </div>
                <div class="contentMain_b">
                    <button><i class="iconfont icon-mf057"></i><br>查看直播</button>
                </div>
            </div>

        </div>
    </div>

</div>
<script>
    let navs_li = document.getElementsByClassName("navs_li");
    let navInternal = document.getElementsByClassName("navInternal")
    new Vue({
        el: "#root",
        data() {
            return {
                navs: [
                    {
                        id: 1, iconClass: "icon-shezhi", title: "教学系统", disNav: "disNav",
                        nav: [
                            {iconClass: "icon-xitongshouye", name: "系统首页"}
                        ]
                    }, {
                        id: 2, iconClass: "icon-rili", title: "班级管理", disNav: "",
                        nav: [
                            {iconClass: "icon-xitongshouye", name: "系统首页"},
                            {iconClass: "icon-xitongshouye", name: "系统首页"}
                        ]
                    }, {
                        id: 3, iconClass: "icon-job", title: "就业管理", disNav: "",
                        nav: [
                            {iconClass: "icon-xitongshouye", name: "系统首页"},
                            {iconClass: "icon-xitongshouye", name: "系统首页"},
                            {iconClass: "icon-xitongshouye", name: "系统首页"},
                            {iconClass: "icon-xitongshouye", name: "系统首页"}
                        ]
                    }, {
                        id: 4, iconClass: "icon-renwu", title: "教学管理", disNav: "",
                        nav: [
                            {iconClass: "icon-xitongshouye", name: "系统首页"},
                            {iconClass: "icon-xitongshouye", name: "系统首页"}
                        ]
                    }, {
                        id: 5, iconClass: "icon-zhuzhuangtu", title: "考试管理", disNav: "",
                        nav: [
                            {iconClass: "icon-xitongshouye", name: "系统首页"},
                            {iconClass: "icon-xitongshouye", name: "系统首页"},
                            {iconClass: "icon-xitongshouye", name: "系统首页"}
                        ]
                    }, {
                        id: 6, iconClass: "icon-fenbi", title: "讲师管理", disNav: "",
                        nav: [
                            {iconClass: "icon-xitongshouye", name: "系统首页"}
                        ]
                    }, {
                        id: 7, iconClass: "icon-renwu", title: "测试管理", disNav: "",
                        nav: [
                            {iconClass: "icon-xitongshouye", name: "系统首页"},
                            {iconClass: "icon-xitongshouye", name: "系统首页"},
                            {iconClass: "icon-xitongshouye", name: "系统首页"}
                        ]
                    }, {
                        id: 8, iconClass: "icon-renwuliebiao", title: "取消座位管理", disNav: "",
                        nav: [
                            {iconClass: "icon-xitongshouye", name: "系统首页"}
                        ]
                    }, {
                        id: 9, iconClass: "icon-renqun", title: "逆战学员分配", disNav: "",
                        nav: [
                            {iconClass: "icon-xitongshouye", name: "系统首页"},
                            {iconClass: "icon-xitongshouye", name: "系统首页"}
                        ]
                    }, {
                        id: 10, iconClass: "icon-renqun", title: "学员异动管理", disNav: "",
                        nav: [
                            {iconClass: "icon-xitongshouye", name: "系统首页"},
                            {iconClass: "icon-xitongshouye", name: "系统首页"}
                        ]
                    }
                ],
                users: [
                    {id: 1, user: "user", ip: "117.160.136.12", address: "127.0.0.1", oldDate: "2023-05-20 16:30:05"},
                    {id: 2, user: "user", ip: "117.160.136.12", address: "127.0.0.1", oldDate: "2023-05-20 16:30:05"},
                    {id: 3, user: "user", ip: "117.160.136.12", address: "127.0.0.1", oldDate: "2023-05-20 16:30:05"},
                    {id: 4, user: "user", ip: "117.160.136.12", address: "127.0.0.1", oldDate: "2023-05-20 16:30:05"},
                    {id: 5, user: "user", ip: "117.160.136.12", address: "127.0.0.1", oldDate: "2023-05-20 16:30:05"},
                    {id: 6, user: "user", ip: "117.160.136.12", address: "127.0.0.1", oldDate: "2023-05-20 16:30:05"},
                    {id: 7, user: "user", ip: "117.160.136.12", address: "127.0.0.1", oldDate: "2023-05-20 16:30:05"},
                    {id: 8, user: "user", ip: "117.160.136.12", address: "127.0.0.1", oldDate: "2023-05-20 16:30:05"},
                    {id: 9, user: "user", ip: "117.160.136.12", address: "127.0.0.1", oldDate: "2023-05-20 16:30:05"},
                    {id: 10, user: "user", ip: "117.160.136.12", address: "127.0.0.1", oldDate: "2023-05-20 16:30:05"},
                ]
            }
        },
        methods: {
            Dis(num) {
                navs_li[num - 1].className = "current_navs navs_li"
                for (let i = 0; i < this.navs.length; i++) {
                    if (i + 1 !== num) {
                        navs_li[i].className = "navs_li"
                    }
                    this.navs[i].disNav = "disNav"
                }
            }
        }

    });

    navs_li[0].className = "current_navs navs_li"

</script>

</body>
</html>